body {
  margin:25px;
  background-image: url("tlo my space.jpg");
}



#image{
    height: 200px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    

}

 

#linki{
    text-align: center;
    text-decoration: none;
    border-radius: 15px;
    font-size: 20px;
    font-family: "Brush Script MT", Cursive;
}
h1,h2{
    text-align: center;
    color: white;
    font-family: "Brush Script MT", Cursive;
}

#muza{
    text-align: center;
    font-family: "Brush Script MT", Cursive;
    
}
#muza2{
    text-align: left;
    margin-right: 80px;
    font-family: "Brush Script MT", Cursive;
    

}
#muza3{
  text-align: right;
  position: relative;
  bottom: 100px;
  margin-left: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza4{
  text-align: left;
  margin-right: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza5{
  text-align: right;
  position: relative;
  bottom: 100px;
  margin-left: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza6{
  text-align: left;
  margin-right: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza7{
  text-align: right;
  position: relative;
  bottom: 120px;
  margin-left: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza8{
  text-align: left;
  position: relative;
  bottom: 100px;
  margin-right: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza9{
  text-align: right;
  position: relative;
  bottom: 220px;
  margin-left: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza10{
  text-align: left;
  position: relative;
  bottom: 120px;
  margin-right: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza11{
  text-align: right;
  position: relative;
  bottom: 240px;
  margin-left: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza12{
  text-align: left;
  position: relative;
  bottom: 140px;
  margin-right: 80px;
  font-family: "Brush Script MT", Cursive;
}
#muza13{
  text-align: right;
  position: relative;
  bottom: 260px;
  margin-left:80px;
  font-family: "Brush Script MT", Cursive;
  margin: 20px 20;
}
#info{
    color: white;
    font-family: "Brush Script MT", Cursive;
    font-size: 18px;
    line-height: 1.9;

    
    
}
#muzaS{
  font-family: "Brush Script MT", Cursive;
  font-size: xx-large;
}




#in{
    text-align: left;
}

#ph{
    text-align: center;
}

#mu{
    text-align: right;
}

html{
    background-color: black;
}

ul{
    list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  text-decoration: none;
}

li {
    display: inline;
    text-align:center; 
    text-decoration: none;
  }

  a{
    
    text-decoration: none;
    color: white;
    
    border-radius: 10px;
    
  }
  a:hover{
    color:black
  }
  
   #fb:hover{
    opacity:0
   } 
   #sc:hover{
    opacity:0;
   }
    #yt:hover{
      opacity: 0;
    }
    #scB{
      opacity: 0;
    }
    #fbB{
      opacity: 0;
    }
    #ytB{
      opacity: 0;
    }
    #scB:hover{
      opacity: 100;
    }
    #fbB:hover{
      opacity: 100;
    }
    #ytB:hover{
      opacity: 100;
    }
    
  
    
    
  #wewn{
    font-size: 40px;
    text-align: center;
    color: white;
    word-spacing:40px;
   
  }
  
  #linki:hover{
    -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  
  

    
  }

  * {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  


}

/* Hide the images by default */
.mySlides {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-left: 10cm;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 20%;
  width: auto;
  padding: 16px;
  margin-top: -20px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(87, 84, 84, 0.8);
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: white; /* Set a background color */
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: black; /* Add a dark-grey background on hover */
    color: white;
    -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
  }
  button{
    
    border-radius: 10px;
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    
    color: black; /* Text color */
    
    
    cursor: pointer;
    font-size: 22px;
    font-family: "Brush Script MT", Cursive;
}


    
    
  
  .menu1{
    
    color: white; /* Text color */
    border-radius: 15px;
    background-color: rgb(28, 28, 28);
    font-family: "Brush Script MT", Cursive;
    text-align: center;
    
   
    
  }
  .menu1:hover{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
    background-color: white;
    color: black;
  

  }
  #menu2{
    
    color: white; /* Text color */
    border-radius: 15px;
    background-color:rgb(28, 28, 28);;
   
    
  }
  #menu2:hover{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
    background-color: white; /* Add a dark-grey background on hover */
  color: black;
    
   }

  #menu3{
    
    color: white; /* Text color */
    border-radius: 15px;
    background-color: rgb(28, 28, 28);;
   
    
  }
  #menu3:hover{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
    background-color: white; /* Add a dark-grey background on hover */
  color: black;
  }
  #menu4{
    
    color: white; /* Text color */
    border-radius: 15px;
    background-color: rgb(28, 28, 28);;
   
    
  }
  #menu4:hover{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
    background-color: white; /* Add a dark-grey background on hover */
  color: black;
  }
  h5{
    color: white;
  }
  .footer {
    font-size: small;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
 }
 [hidden] {
  display: none
}

#loading {
  width: 950px;
  height: 800px;
  margin: auto;
  margin-top: -20px;
  margin-left: 90px;
  
 
}










.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out;
}

.cursor-dot {
    
    width: 5px;
    height: 5px;
    background-color: red;
}

.cursor-dot-outline {
    
    width: 10px;
    height: 10px;
    background-color: red;
}
hr{
  border: 1px solid rgba(255, 255, 255, 0.299);
}



audio::-webkit-media-controls-panel {
  background-color: rgb(113, 113, 113);
  
}
audio { width: 500px; }


audio::-webkit-media-controls-panel:hover{
  background-color: rgb(237, 24, 24);
}







* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 10%;
  width: auto;
  padding: 16px;
  margin-top: -90px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: white;
  
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}